feat(astro): Add support for View Transitions by wobsoriano · Pull Request #4354 · clerk/javascript

wobsoriano · 2024-10-17T17:21:01Z

Description

This PR adds Astro View Transitions support to our Clerk components. It is basically the "SPA mode" for Astro.

Before this change, Clerk components didn't work properly with Astro View Transitions. When using the <ViewTransitions /> component in an Astro app, our Clerk components weren't remounting during page navigation.

The solution was to:

Run the runInjectionScript function in the astro:page-load to ensure Clerk components are properly mounted when switching pages.
Create a custom swap function and keep the elements added by @emotion/cache. This maintains the styling across page transitions.

Here's a basic demo using <SignIn />, <UserProfile /> and <UserButton /> components being rendered in a view transitions enabled pages:

Screen.Recording.2024-10-17.at.1.10.21.PM.mov

Resolves ECO-64

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-10-17T17:21:04Z

🦋 Changeset detected

Latest commit: b58e76b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/astro	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

wobsoriano · 2024-10-17T20:36:28Z

+  const emotionElements = document.querySelectorAll(`style[${EMOTION_ATTR}]`);
+  swapHeadElements(doc, Array.from(emotionElements));


We need to keep the <style> element added by @emotion/cache to keep the styling when switching between pages.

The default Astro swap function will remove this one

panteliselef

Seems great. In the video, i see that the "afterSignIn" navigation did not run with the page transitions (fade-in/out). Is this expected ?

panteliselef · 2024-10-18T10:05:55Z

@@ -0,0 +1,61 @@
+// eslint-disable-next-line import/no-unresolved
+import { swapFunctions } from 'astro:transitions/client';


❓ Is this always bundled with Astro ? Is there a case where the module will not exists causing our integration to break ?

It is indeed bundled with Astro (astro/virtual-modules/transitions-swap-functions.js), but is not available in Astro v3.

Also we let the Astro Vite plugin handle it by excluding from vite.optimizeDeps:

javascript/packages/astro/src/integration/vite-plugin-astro-config.ts

Line 30 in b58e76b

config.optimizeDeps?.exclude?.push('astro:transitions/client');

wobsoriano · 2024-10-18T15:15:39Z

Seems great. In the video, i see that the "afterSignIn" navigation did not run with the page transitions (fade-in/out). Is this expected ?

Good catch! I've added another update that will use the navigate method from astro:transitions/client if transition is enabled on a page:

Screen.Recording.2024-10-18.at.7.59.28.AM.mov

It should now handle any routing within the components too

wobsoriano · 2024-10-18T15:44:55Z

!snapshot

clerk-cookie · 2024-10-18T15:49:22Z

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.4.0-snapshot.vb58e76b
@clerk/backend	1.14.2-snapshot.vb58e76b
@clerk/chrome-extension	1.3.21-snapshot.vb58e76b
@clerk/clerk-js	5.28.0-snapshot.vb58e76b
@clerk/elements	0.17.0-snapshot.vb58e76b
@clerk/clerk-expo	2.2.27-snapshot.vb58e76b
@clerk/express	1.3.2-snapshot.vb58e76b
@clerk/fastify	2.0.4-snapshot.vb58e76b
@clerk/localizations	3.3.1-snapshot.vb58e76b
@clerk/nextjs	5.8.0-snapshot.vb58e76b
@clerk/clerk-react	5.12.1-snapshot.vb58e76b
@clerk/remix	4.2.40-snapshot.vb58e76b
@clerk/clerk-sdk-node	5.0.53-snapshot.vb58e76b
@clerk/shared	2.10.0-snapshot.vb58e76b
@clerk/tanstack-start	0.4.16-snapshot.vb58e76b
@clerk/testing	1.3.14-snapshot.vb58e76b
@clerk/themes	2.1.38-snapshot.vb58e76b
@clerk/types	4.27.0-snapshot.vb58e76b

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.4.0-snapshot.vb58e76b --save-exact

@clerk/backend

npm i @clerk/backend@1.14.2-snapshot.vb58e76b --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.3.21-snapshot.vb58e76b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.28.0-snapshot.vb58e76b --save-exact

@clerk/elements

npm i @clerk/elements@0.17.0-snapshot.vb58e76b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.27-snapshot.vb58e76b --save-exact

@clerk/express

npm i @clerk/express@1.3.2-snapshot.vb58e76b --save-exact

@clerk/fastify

npm i @clerk/fastify@2.0.4-snapshot.vb58e76b --save-exact

@clerk/localizations

npm i @clerk/localizations@3.3.1-snapshot.vb58e76b --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.8.0-snapshot.vb58e76b --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.12.1-snapshot.vb58e76b --save-exact

@clerk/remix

npm i @clerk/remix@4.2.40-snapshot.vb58e76b --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.53-snapshot.vb58e76b --save-exact

@clerk/shared

npm i @clerk/shared@2.10.0-snapshot.vb58e76b --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.4.16-snapshot.vb58e76b --save-exact

@clerk/testing

npm i @clerk/testing@1.3.14-snapshot.vb58e76b --save-exact

@clerk/themes

npm i @clerk/themes@2.1.38-snapshot.vb58e76b --save-exact

@clerk/types

npm i @clerk/types@4.27.0-snapshot.vb58e76b --save-exact

mlafeldt · 2024-11-06T18:20:30Z

Hey @wobsoriano!

I'm using @clerk/astro v1.4.7, which should contain this change. However, I'm still seeing exactly this behavior on Cloudflare Pages with the UserButton disappearing randomly on navigation:

Before this change, Clerk components didn't work properly with Astro View Transitions. When using the <ViewTransitions /> component in an Astro app, our Clerk components weren't remounting during page navigation.

My workaround is to use UserButton from @clerk/astro/react instead of @clerk/astro/components, which works fine.

Maybe they changed something in the latest Astro release?

❯ bun astro info
Astro                    v4.16.9
Node                     v22.9.0
System                   macOS (arm64)
Package Manager          bun
Output                   hybrid
Adapter                  @astrojs/cloudflare
Integrations             @clerk/astro/integration
                         @astrojs/react
                         @astrojs/tailwind

wobsoriano · 2024-11-06T18:27:28Z

@mlafeldt that is interesting. I will try and update my astro template here and check if the UI components from @clerk/astro/components fails 👀

mlafeldt · 2024-11-06T19:10:56Z

@wobsoriano It looks like the UserButton disappears when navigating between pre-rendered and server-rendered pages. One page in my app uses React without SSR. Adding export const prerender = false to that page fixes the problem.

feat(astro): Add support for View Transitions

84773f6

chore: add changeset

4311c3c

clerk-cookie added the integration label Oct 17, 2024

wobsoriano added 3 commits October 17, 2024 10:39

chore: Improve variables and comments

5727a57

chore: keep div element created by Clerk in new document

1c59384

test(astro): Add initial e2e

8765cd4

wobsoriano removed the integration label Oct 17, 2024

test: improve view transition e2e

1946e59

clerk-cookie added the integration label Oct 17, 2024

wobsoriano added 4 commits October 17, 2024 12:53

test: fix vite error

12568f7

test: fix vite error

2324c73

test: add more guide comments

9160f13

test: add vite fix to hybrid test

695e25f

wobsoriano commented Oct 17, 2024

View reviewed changes

Comment thread packages/astro/src/integration/create-integration.ts Outdated

Merge branch 'main' into rob/eco-64-astro-view-transitions-support

9201794

wobsoriano marked this pull request as ready for review October 17, 2024 20:29

wobsoriano requested review from LekoArts and panteliselef October 17, 2024 20:32

wobsoriano commented Oct 17, 2024

View reviewed changes

test: fix vite optimize deps error

6963147

panteliselef approved these changes Oct 18, 2024

View reviewed changes

chore: improve navigation

a2afb95

Merge branch 'main' into rob/eco-64-astro-view-transitions-support

8e9a101

wobsoriano marked this pull request as draft October 18, 2024 15:36

chore: exclude astro transitions imports from optimized deps

b58e76b

clerk deleted a comment from clerk-cookie Oct 18, 2024

wobsoriano marked this pull request as ready for review October 18, 2024 15:51

wobsoriano merged commit 9d34d4f into main Oct 18, 2024

wobsoriano deleted the rob/eco-64-astro-view-transitions-support branch October 18, 2024 16:02

clerk-cookie mentioned this pull request Oct 18, 2024

ci(repo): Version packages #4358

Merged

wobsoriano added a commit that referenced this pull request Feb 8, 2025

feat(astro): Add support for View Transitions (#4354)

dd36599

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(astro): Add support for View Transitions - #4354

feat(astro): Add support for View Transitions#4354
wobsoriano merged 15 commits into
mainfrom
rob/eco-64-astro-view-transitions-support

wobsoriano commented Oct 17, 2024 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 17, 2024 •

edited

Loading

Uh oh!

Uh oh!

wobsoriano Oct 17, 2024

Uh oh!

panteliselef left a comment

Uh oh!

panteliselef Oct 18, 2024 •

edited

Loading

Uh oh!

wobsoriano Oct 18, 2024 •

edited

Loading

Uh oh!

wobsoriano commented Oct 18, 2024 •

edited

Loading

Uh oh!

wobsoriano commented Oct 18, 2024

Uh oh!

clerk-cookie commented Oct 18, 2024

Uh oh!

mlafeldt commented Nov 6, 2024

Uh oh!

wobsoriano commented Nov 6, 2024

Uh oh!

mlafeldt commented Nov 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		const emotionElements = document.querySelectorAll(`style[${EMOTION_ATTR}]`);
		swapHeadElements(doc, Array.from(emotionElements));

		@@ -0,0 +1,61 @@
		// eslint-disable-next-line import/no-unresolved
		import { swapFunctions } from 'astro:transitions/client';

Uh oh!

Conversation

wobsoriano commented Oct 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Oct 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

wobsoriano Oct 17, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef left a comment

Choose a reason for hiding this comment

Uh oh!

panteliselef Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wobsoriano commented Oct 18, 2024

Uh oh!

clerk-cookie commented Oct 18, 2024

Uh oh!

mlafeldt commented Nov 6, 2024

Uh oh!

wobsoriano commented Nov 6, 2024

Uh oh!

mlafeldt commented Nov 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wobsoriano commented Oct 17, 2024 •

edited

Loading

changeset-bot Bot commented Oct 17, 2024 •

edited

Loading

panteliselef Oct 18, 2024 •

edited

Loading

wobsoriano Oct 18, 2024 •

edited

Loading

wobsoriano commented Oct 18, 2024 •

edited

Loading